<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

	</body>
	<script>
		//名值对编码  分装函数
		function params(data) {
			var arr = [];
			for(var i in data) {
				arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
			}
			return arr.join('&');
		}

		//封装Ajax函数
		function ajax(obj) {
			var xhr = new XMLHttpRequest(); //先出创建对象
			obj.url = obj.url + '?rand=' + Math.random();
			obj.data = params(obj.data);
			if(obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
			if(obj.async === true) { //异步
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						callback();
					}

				};
			}
			xhr.open(obj.method, obj.url, obj.async);
			if(obj.method === 'post') {
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//post 需要使用XHR来模仿表单提交。
				xhr.send(obj.data);
			} else {
				xhr.send(null);
			}
			if(obj.async === false) { //同步
				callback();
			}

			function callback() { //分装返回数据函数
				if(xhr.status == 200) {
					obj.success(xhr.responseText); //回调
				} else {
					alert('数据返回失败！状态代码：' + xhr.status + '，
						状态信息： ' + xhr.statusText);
					}
				}
			}


			//调用Ajax
			window.addEventListener('click', function() {
				ajax({
					method: 'get',
					url: 'demo.php',
					data: {
						'name': 'Lee',
						'age': 100
					},
					success: function(text) {
						alert(text);
					},
					async: true
				});

			}, false);
	</script>

</html>